<template>
  <el-tooltip class="ellipsis" :disabled="!isShowTooltip" :content="content" placement="top">
    <p
      ref="tooltip"
      @click="$emit('click')"
      @mouseenter.stop="$emit('mouseenter', isShowTooltip)"
      @mouseleave="$emit('mouseleave', false)"
    >
      {{ content || '-' }}
    </p>
  </el-tooltip>
</template>

<script setup>
  import {watch, nextTick, onMounted, onUnmounted, toRef, ref} from 'vue';
  defineEmits(['click', 'mouseenter', 'mouseleave']);
  const props = defineProps(['content']);
  const content = toRef(props, 'content');
  let isShowTooltip = ref(true);
  const tooltip = ref(null);
  const getShowTooltip = () => (isShowTooltip.value = tooltip.value.scrollWidth > tooltip.value.clientWidth);
  watch(content, () => nextTick(getShowTooltip));

  onMounted(() => {
    getShowTooltip();
    window.addEventListener('resize', getShowTooltip);
  });
  onUnmounted(() => window.removeEventListener('resize', getShowTooltip));
</script>
